<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./首页.css">
    <link rel="stylesheet" href="./swiper.min.css">
</head>

<body>
    <header>
        <h1> 智慧商城 </h1>
    </header>
    <main>
        <div class="search" @click="location">
            <input type="text" placeholder="搜索你要找的商品">
        </div>
        <div class="center">
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./10004.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./10005.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./10006.jpg" alt=""></div>
                        <!-- <div class="swiper-slide">
                            <img src="" alt="">
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="notice">
            <span>智慧商城2.0全新上线，更多新品等你来选~</span>
        </div>
        <div class="nav">
            <a href="#">
                <img src="./58a7c1f62df4cb1eb47fe83ff0e566e6.png" alt="">
                <p>新品首发</p>
            </a>
            <a href="#">
                <img src="./49c64dbbf449e9e8abfca314f92814bd.png" alt="">
                <p>居家生活</p>
            </a>
            <a href="#">
                <img src="./8573fbc5e87e8a88827e905fca284604.png" alt="">
                <p>服饰鞋包</p>
            </a>
            <a href="#">
                <img src="./f01c5fc360f55c6053beec34913bc699.png" alt="">
                <p>美食酒水</p>
            </a>
            <a href="#">
                <img src="./b106e9bd9e0c8c779e7d77a84e92ed93.png" alt="">
                <p>个护清洁</p>
            </a>
            <a href="#">
                <img src="./fd3a573889671b924d89859f521c30c9.png" alt="">
                <p>母婴亲子</p>
            </a>
            <a href="#">
                <img src="./8f979924a4fd3b5f406b62a6b405ea32.png" alt="">
                <p>运动旅行</p>
            </a>
            <a href="#">
                <img src="./f7657720f79ea9f769c40608f369130e.png" alt="">
                <p>数码家电</p>
            </a>
            <a href="#">
                <img src="./36f09e32efc53e1e695210ca92c54ed8.png" alt="">
                <p>宠物生活</p>
            </a>
            <a href="#">
                <img src="./0cccdb31952fbf3bc0026efbe260e40e.png" alt="">
                <p>每日抄底</p>
            </a>

        </div>
        <div class="imageSingle">
        </div>
        <div class="richText">
            <!-- <p>—— 猜你喜欢 ——</p> -->
            <span>—— 猜你喜欢 ——</span>
        </div>
        <div class="goods">
            <div class="goods-item" v-for="(item,index) in list" :key="item.id">
                <!-- {{ item.goods_name }} -->
                <!-- v-for="(item,index) in Array" -->
                <img :src=" item.goods_image " alt="">
                <span>
                    <span class="name">{{ item.goods_name }}</span><br>
                    <span class="count">已售<i class="italic">{{ item.goods_sales }}</i>件</span><br>
                    <span class="price">￥{{ item.goods_price_min}}<i></i></span>
                </span>
            </div>
        </div>
    </main>
    <footer>
        <div class="item">
            <span><img src="./10001.png" alt=""></span>
            <p class="active"> 首页 </p>
        </div>
        <div class="item">
            <span><img src="./10002.png" alt=""></span>
            <p> 分类 </p>
        </div>
        <div class="item">
            <span><img src="./10003.png" alt=""></span>
            <p> 购物车 </p>
        </div>
        <div class="item">
            <span><img src="./10007.png" alt=""></span>
            <p> 我的 </p>
        </div>
    </footer>

    <script src="./swiper.min.js"></script>
    <script src="./axios.js"></script>
    <script src="./vue.js"></script>
    <script>



        axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/'
        // const res = axios.get('/page/detail')
        // console.log(res)
        // res.then(data=>{
        //     console.log(data)
        // })

        const main = new Vue({
            el: 'main',
            created() {
                this.goodList()
            },
            data: {
                //     gat : res.data.data.pageData.items ,
                //    group: gat[6].data
                // {
                //     goods_name : ''
                // }
                list: []

            },

            methods: {
                location() {
                    location.href = './搜索页面.html'
                },

                // 'particulars-tea'(){
                //     location.href='./详情页（茶叶）.html'
                // },
                // 'particulars-pants'(){
                //     location.href='./详情页（裤子）.html'
                // },
                // 'particulars-bread'(){
                //     location.href='./详情页（面包）.html'
                // }


                // axios({
                //     method: 'get',
                //     url: '/page/detail'
                // }).then(
                // (res)=>{
                //     let gat = res.data.data.pageData.items 

                //     let group = gat[6].data
                //     console.log(group)
                // })

                async goodList() {
                    const res = await axios.get('/page/detail')
                    const res2 = res.data.data.pageData.items[6].data
                    console.log(res2)
                    this.list = res2
                    var swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        slidesPerView: 1,
                        paginationClickable: true,
                        spaceBetween: 30,
                        loop: true,
                        autoplay: 1000
                    })
                }

            }
        })
        // gat.map((item,index)=>{
        //     console.log(item.data)
        // })






    </script>
    <!-- @click="particulars-tea" -->
    <!-- @click="particulars-pants" -->
    <!-- @click="particulars-bread" -->
</body>

</html>